<template>
	<view>
		<view @touchmove.stop.prevent="clear" class="share-contaniers share-fix draweranimate" :class="[wxshare?'moves':'selectedmove']">
			<scroll-view scroll-y="true" class="fiximg" :style='{height:autoheight+"px"}' >
				<image :src="shareinfo.imgUrl" mode="aspectFill"></image>
			</scroll-view>

			<view class="share-body">
				<view class="shareinfo">
					<view class="share-item">
						<view class="icon iconfont sharebox" @click="sharequn">&#xe6ea;</view>
						<text>分享给好友</text>
					</view>
					<view class="share-item">
						<view class="iconfont sharebox" @click="saveimages">&#xe6de;</view>
						<text>保存图片</text>
					</view>
					
					<view class="share-item">
						<view class="iconfont sharebox" @click="shareposter">&#xe667;</view>
						<text>分享到朋友圈</text>
					</view>
				</view>
				<view class="sharecancel" @click="cancel">取消</view>
			</view>

		</view>
		<view class="share-mask share-bgcolor animate" :class="[wxshare?'model-bg-show':'model-bg-hidden']"></view>
	</view>
</template>

<script>
	/**
	 * 分享组件
	 */
	export default {
		props: {
			drawid: {
				type: [String, Number],
				default: 0,
			},
			wxshare: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				tempimgpath: '', //临时图片路径
				shareinfo: {
					imgUrl:'',
				} ,//分享朋友圈信息
				autoheight:999
			}
		},
		created(){
			let sys = uni.getSystemInfoSync();
			//console.log(sys.screenHeight);
			this.autoheight = sys.screenHeight-260
		},
	
		watch: {
			wxshare(value, ovalue) {
				//console.log(value, ovalue);
				if (value && !this.poster) {
					this.getposter();
				}
			},
			//有数据时调用	
			shareinfo(value){
				console.log(value);
				if(!value.imgUrl){
					this.sharequn()
				}
			}
		},
		methods: {
			
			//保存图片
			saveimages() {
				let _this = this
				uni.downloadFile({
					url: _this.shareinfo.imgUrl,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(ret) {
								_this.$ShowMsg('图片保存相册成功！');
								console.log(ret);
							}
						})
					}
				})
			},

			//获取海报图片
			getposter(isimg=true) {
				// console.log(isimg);  
				if(this.shareinfo.imgUrl){
					return;
				}
				this.$HttRequest({
					url: '/lottery/shareImg',
					param: {
						id: this.drawid,
						isimg:isimg
					}
				}, 'GET', true).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.shareinfo = res.data;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			
			clear() {

			},
			//隐藏 
			cancel() {
				uni.$emit('closewindown', false);
			},
			//分享朋友或群
			sharequn() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.shareinfo.url,
					title: this.shareinfo.sTitle,
					summary: this.shareinfo.sDescribe,
					imageUrl: this.shareinfo.sImage,
					success: function(res) {
						_this.$HttRequest({
							url: '/task/share',
							param: ''
						}).then((res) => {
							if (res.status === 10000) {
								_this.$ShowMsg('分享朋友或群成功！')
							}
						}).catch((error) => {
							//异常错误
							_this.$ShowMsg('statusCode：' + error);
							console.log(error)
						})
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			//分享到朋友圈
			shareposter() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: _this.shareinfo.imgUrl,
					success: function(res) {
						_this.$HttRequest({
							url: '/task/share',
							param: ''
						}).then((res) => {
							if (res.status === 10000) {
								_this.$ShowMsg('分享朋友圈成功！')
							}
						}).catch((error) => {
							//异常错误
							_this.$ShowMsg('statusCode：' + error);
							console.log(error);
						})
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友圈失败！')
					}
				})
			}
			//下载图片
			// download() { 
			// 	const bitmap = new plus.nativeObj.Bitmap('test');
			// 	bitmap.loadBase64Data(this.poster, () => {
			// 		const url = "_doc/"+this.drawid+Date.parse(new Date())+".png"; // url为时间戳命名方式
			// 		console.log(url)
			// 		this.tempimgstring = url;
			// 		// console.log(this.tempimgpath,this.tempimgstring);
			// 		let _this = this;
			// 		bitmap.save(url, {
			// 			overwrite: true, // 是否覆盖
			// 			quality:80
			// 		}, (i) => {
			// 			console.log(i) 

			// 		})
			// 	}, (e) => {
			// 		console.log('加载图片失败：' + JSON.stringify(e));
			// 	})
			// uni.downloadFile({
			// 	url: 'http://pic135.huitu.com/res/20191226/2416239_20191226161415563039_1.jpg',
			// 	success: (res) => {
			// 		console.log(res.tempFilePath);
			// 		uni.saveImageToPhotosAlbum({
			// 			filePath: res.tempFilePath,
			// 			success: (ret) => {
			// 				this.$ShowMsg('图片保存成功！');
			// 				console.log(ret);
			// 			},
			// 			fail: (error) => {
			// 				console.log(error)
			// 			}
			// 		})
			// 	},
			// 	fail: (e) => {
			// 		console.log(e)
			// 	}
			// });
			// },
		}
	}
</script>

<style lang="scss">
	.my-sliders {}

	.share-contaniers,
	.share-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 32rpx;
		z-index: 9996;
		//transition-timing-function: cubic-bezier(.5,.49,.57,1.41);
	}

	.share-bgcolor {
		opacity: 0;
		background-color: rgba(#000, 0.8);
	}

	.share-fix {
		z-index: 9997;
		transform: translateY(20);
	}

	.share-body {
		background-color: #f7f7f7;
		width: 100%;
		height: 350rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 9998;
		position: fixed;
		bottom: 0;
	}

	.animate {
		transition: all .1s ease-in-out;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.41)
	}

	.draweranimate {
		transition: all .3s ease-in-out;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.16)
	}

	.sharecancel {
		color: #ababab;
		margin: 10rpx auto;
		flex: 1;
		font-size: 32rpx;

		text-align: center;
		line-height: 80rpx;
	}

	.shareinfo {
		margin: 0 auto;
		width: 90%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1rpx solid #e6e6e6;
		bottom: 0;

		.share-item {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin: 40rpx 0;

			text {
				font-size: 28rpx;
				margin-top: 20rpx;
			}

			.sharebox {

				font-size: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100rpx;
				border: 1rpx solid #ebebeb;
				border-radius: 20rpx;
				background-color: #fff;

			}
		}

	}

	.fiximg {
		margin: 40rpx auto;
		margin-bottom: 0;
		width: 90%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 621rpx;
		// border: 1rpx solid #F0AD4E;
		// background-color: #e6e6e6;
		image {
			width: 621rpx;
			height: 999rpx;
		}
	}

	.model-bg-show {
		visibility: visible;
		background-color: #000;
		opacity: 0.8
	}

	.model-bg-hidden {
		visibility: hidden;
		opacity: 0
	}

	.moves {
		visibility: visible;
		transform: translateY(0);
	}

	.selectedmove {
		visibility: hidden;
		transform: translateY(350rpx);
	}
</style>
